<template>
    <div class="default-main ba-table-box">

        <!-- 主要内容区域 -->
        <div class="theme-editor-content">
            <!-- 左侧手机预览区域 -->
            <div class="preview-section">
                <iframe ref="previewIframe" :src="previewUrl" frameborder="0" class="phone-preview" @load="onIframeLoaded"></iframe>
            </div>

            <!-- 右侧样式调整区域 -->
            <div class="editor-section">
                <!-- 各项设置 -->
                <div class="theme-section">
                    <!-- 主题配色 -->
                    <div class="item">
                        <div class="card-header">
                            <span>主题配色</span>
                        </div>
                        <div class="color-group">
                            <div class="color-item">
                                <label>常规颜色(主色)</label>
                                <el-color-picker v-model="themeSettings.theme.color" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>背景颜色(副色)</label>
                                <el-color-picker v-model="themeSettings.theme.bgColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>首页标题文本颜色</label>
                                <el-color-picker v-model="themeSettings.theme.btwzColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>首页背景颜色</label>
                                <el-color-picker v-model="themeSettings.theme.sybjColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                        </div>
                    </div>
                    <!-- 顶部导航栏 -->
                    <div class="item">
                        <div class="card-header">
                            <span>顶部导航栏</span>
                        </div>
                        <div class="color-group">
                            <div class="color-item">
                                <label>标题颜色</label>
                                <el-color-picker v-model="themeSettings.navbar.titleColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>背景颜色</label>
                                <el-color-picker v-model="themeSettings.navbar.bgColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>首页背景颜色</label>
                                <el-color-picker v-model="themeSettings.navbar.backIconColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                        </div>
                    </div>
                    <!-- 底部导航栏 -->
                    <div class="item">
                        <div class="card-header">
                            <span>底部导航栏</span>
                        </div>
                        <div class="color-group">
                            <div class="color-item">
                                <label>文字颜色</label>
                                <el-color-picker v-model="themeSettings.tabbar.color" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>文字颜色（选中）</label>
                                <el-color-picker v-model="themeSettings.tabbar.selectColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                            <div class="color-item">
                                <label>背景颜色</label>
                                <el-color-picker v-model="themeSettings.tabbar.bgColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                        </div>
                    </div>
                    <!-- 顶部设置 -->
                    <div class="item">
                        <div class="card-header">
                            <span>顶部设置</span>
                        </div>
                        <div class="layout-group">
                            <div class="form-item">
                                <label>banner高度</label>
                                <el-input-number v-model="themeSettings.topset.bannerTop" :min="0" :max="500" @change="updateTheme"></el-input-number>
                            </div>
                            <div class="form-item">
                                <label>菜单栏距离banner高度</label>
                                <el-input-number v-model="themeSettings.topset.menuTop" :min="0" :max="500" @change="updateTheme"></el-input-number>
                            </div>
                            <div class="form-item">
                                <label>是否启用顶部搜索</label>
                                <el-switch v-model="themeSettings.topset.type"  active-value="1" inactive-value="0" @change="updateTheme"></el-switch>
                            </div>
                        </div>
                    </div>
                    <!-- 商家端 -->
                    <div class="item">
                        <div class="card-header">
                            <span>商家端</span>
                        </div>
                        <div class="layout-group">
                            <div class="color-item">
                                <label>背景颜色</label>
                                <el-color-picker v-model="themeSettings.business.bgColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                        </div>
                    </div>
                    <!-- 管理端 -->
                    <div class="item">
                        <div class="card-header">
                            <span>管理端</span>
                        </div>
                        <div class="layout-group">
                            <div class="color-item">
                                <label>背景颜色</label>
                                <el-color-picker v-model="themeSettings.admin.bgColor" show-alpha @change="updateTheme"></el-color-picker>
                            </div>
                        </div>
                    </div>
                    <!-- 按钮配置 -->
                    <div class="item">
                        <div class="card-header">
                            <span>按钮配置</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex03">图片(选中)</div>
                                    <div class="config-title flex03">底部文字</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.list"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'bottomNav')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'bottomNav')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 选中图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'selectedImage', 'bottomNav')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).selectedImage"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).selectedImage)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 底部文字 -->
                                            <div class="config-cell flex03">
                                                <el-input
                                                    class="pdr25"
                                                    v-model="(item as any).text"
                                                    placeholder="请输入底部文字"
                                                ></el-input>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).path" placeholder="请输入页面路径"></el-input>
                                               <!-- <el-button
                                                    type="primary"
                                                    class="select-path-btn"
                                                    @click="selectPath(index, 'bottomNav')"
                                                >
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'bottomNav')"
                                                    :disabled="themeSettings.tabbar.list.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('bottomNav')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 首页配置 -->
                    <div class="item">
                        <div class="card-header">
                            <span>首页配置</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">文字</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.list1"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'home')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'img', 'home')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).img"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).img)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 文字 -->
                                            <div class="config-cell flex05">
                                                <el-input
                                                    class="pdr25"
                                                    v-model="(item as any).name"
                                                    placeholder="请输入底部文字"
                                                ></el-input>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径" ></el-input>
                                            <!--    <el-button size="small" type="primary" class="select-path-btn" @click="selectPath(index, 'home')">
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'home')"
                                                    :disabled="themeSettings.tabbar.list1.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('home')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人中心一 -->
                    <div class="item">
                        <div class="card-header">
                            <span>个人中心一</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">文字</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.myactive1"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'userCenterOne')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'userCenterOne')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 文字 -->
                                            <div class="config-cell flex05">
                                                <el-input
                                                    class="pdr25"
                                                    v-model="(item as any).name"
                                                    placeholder="请输入底部文字"
                                                ></el-input>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径"></el-input>
                                               <!-- <el-button
                                                    size="small"
                                                    type="primary"
                                                    class="select-path-btn"
                                                    @click="selectPath(index, 'userCenterTwo')"
                                                >
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'userCenterTwo')"
                                                    :disabled="themeSettings.tabbar.myactive1.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('userCenterOne')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人中心二 -->
                    <div class="item">
                        <div class="card-header">
                            <span>个人中心二</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">文字</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.myactive"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'userCenterTwo')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'userCenterTwo')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 文字 -->
                                            <div class="config-cell flex05">
                                                <el-input
                                                    class="pdr25"
                                                    v-model="(item as any).name"
                                                    placeholder="请输入底部文字"
                                                ></el-input>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径"></el-input>
                                         <!--       <el-button
                                                    size="small"
                                                    type="primary"
                                                    class="select-path-btn"
                                                    @click="selectPath(index, 'userCenterTwo')"
                                                >
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'userCenterTwo')"
                                                    :disabled="themeSettings.tabbar.myactive.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('userCenterTwo')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人中心底部 -->
                    <div class="item">
                        <div class="card-header">
                            <span>个人中心底部</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">文字</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.grzx"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'userCenterBottom')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'userCenterBottom')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 文字 -->
                                            <div class="config-cell flex05">
                                                <el-input
                                                    class="pdr25"
                                                    v-model="(item as any).name"
                                                    placeholder="请输入底部文字"
                                                ></el-input>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径"></el-input>
                                            <!--    <el-button
                                                    size="small"
                                                    type="primary"
                                                    class="select-path-btn"
                                                    @click="selectPath(index, 'userCenterBottom')"
                                                >
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'userCenterBottom')"
                                                    :disabled="themeSettings.tabbar.grzx.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('userCenterBottom')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 轮播 -->
                    <div class="item">
                        <div class="card-header">
                            <span>banner</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.banner"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'banner')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'banner')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径"></el-input>
                                           <!--     <el-button size="small" type="primary" class="select-path-btn" @click="selectPath(index, 'banner')">
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'banner')"
                                                    :disabled="themeSettings.tabbar.banner.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('banner')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 首页广告 -->
                    <div class="item">
                        <div class="card-header">
                            <span>首页广告</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.indexgg"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'homeAd')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'homeAd')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径"></el-input>
                                                <!-- <el-button size="small" type="primary" class="select-path-btn" @click="selectPath(index, 'homeAd')">
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'homeAd')"
                                                    :disabled="themeSettings.tabbar.indexgg.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('homeAd')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人中心广告 -->
                    <div class="item">
                        <div class="card-header">
                            <span>个人中心广告</span>
                        </div>
                        <div class="layout-group">
                            <div class="button-config-container">
                                <div class="button-config-header">
                                    <div class="config-title flex03">图片</div>
                                    <div class="config-title flex05">页面路径</div>
                                    <div class="config-title flex03 jc-center">操作</div>
                                </div>
                                <draggable
                                    v-model="themeSettings.tabbar.usergg"
                                    item-key="index"
                                    handle=".drag-handle"
                                    animation="150"
                                    ghost-class="sortable-ghost"
                                    @end="(evt: any) => handleDragEnd(evt, 'userCenterAd')"
                                    class="button-config-list"
                                >
                                    <template #item="{ element: item, index }">
                                        <div class="button-config-item">
                                            <!-- 图标预览 -->
                                            <div class="config-cell flex03">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action=""
                                                    :show-file-list="false"
                                                    @change="(file) => handleIconUpload(file, index, 'image', 'userCenterAd')"
                                                    :auto-upload="false"
                                                    accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp"
                                                >
                                                    <el-image
                                                        v-if="(item as any).image"
                                                        fit="contain"
                                                        :src="fullUrl((item as any).image)"
                                                        class="icon-preview-image"
                                                    >
                                                        <template #error>
                                                            <div class="image-slot">
                                                                <el-icon size="20"><Picture /></el-icon>
                                                            </div>
                                                        </template>
                                                    </el-image>
                                                    <div v-else class="avatar-uploader-icon">
                                                        <el-icon size="20"><UploadFilled /></el-icon>
                                                        <div class="upload-text">上传</div>
                                                    </div>
                                                </el-upload>
                                            </div>

                                            <!-- 页面路径 -->
                                            <div class="config-cell flex05">
                                                <el-input v-model="(item as any).url" placeholder="请输入页面路径" ></el-input>
                                            <!--    <el-button
                                                    size="small"
                                                    type="primary"
                                                    class="select-path-btn"
                                                    @click="selectPath(index, 'userCenterAd')"
                                                >
                                                    选择
                                                </el-button> -->
                                            </div>

                                            <!-- 操作按钮 -->
                                            <div class="config-cell flex03 jc-center">
                                                <el-button
                                                    size="small"
                                                    type="danger"
                                                    @click="removeButton(index, 'userCenterAd')"
                                                    :disabled="themeSettings.tabbar.usergg.length <= 1"
                                                >
                                                    <el-icon><Delete /></el-icon>
                                                </el-button>
                                                <div class="drag-handle" style="margin-left: 10px; cursor: move">
                                                    <Icon color="#fff" size="16" name="fa fa-arrows" />
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </draggable>

                                <!-- 添加按钮 -->
                                <div class="add-button-container">
                                    <el-button type="success" @click="addButton('userCenterAd')" :icon="Plus"> 增加 </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <el-button @click="saveTheme" type="primary">保存</el-button>
                    <!-- <el-button @click="resetTheme">{{ t('routine.theme.reset_theme') }}</el-button> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { provide, ref, reactive, onMounted } from 'vue'
import PopupForm from './popupForm.vue'
import { defaultOptButtons } from '/@/components/table'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { Delete, UploadFilled, Picture, Plus } from '@element-plus/icons-vue'
import { getThemeSettings, saveThemeSettings } from '/@/api/backend/routine/theme'
import { fileUpload } from '/@/api/common'
import draggable from 'vuedraggable'
import { fullUrl } from '/@/utils/common'

defineOptions({
    name: 'routine/theme',
})

const { t } = useI18n()

// 预览iframe引用
const previewIframe = ref<HTMLIFrameElement>()
// 导入draggable组件已在顶部完成
// 不再需要各列表容器引用，使用vuedraggable替代手动拖拽

// 预览URL
const previewUrl = ref('') // 根据需求设置为接口路径+/5/

// 主题设置 - 为每个列表创建独立的数据数组，初始为空
const themeSettings = reactive({
    // 主题配色
    theme: {
        color: '#fe344c',
        bgColor: '#f5ce45',
        btwzColor: '#ffffff',
        sybjColor: '#f2f2f2',
    },
    // 顶部导航栏
    navbar: {
        titleColor: '#050505',
        bgColor: '#ffffff',
        backIconColor: '#fe344c',
    },
    // 底部导航栏
    tabbar: {
        color: '#333333',
        selectColor: '#fe344c',
        bgColor: '#ffffff',
        list: [],
        list1: [],
        myactive: [],
        myactive1: [],
        grzx: [],
        banner: [],
        indexgg: [],
        usergg: [],
    },
    // 顶部设置
    topset: {
        type: '1',
        menuTop: 0,
        bannerTop: 0
    },
    // 商家端
    business: {
		bgColor: "#900aa3"
	},
    // 管理端
    admin: {
		bgColor: "#2095f5"
	},
})

// 初始主题设置（用于重置）
const initialThemeSettings = JSON.parse(JSON.stringify(themeSettings))

// 重写auth方法，绕过权限控制，始终返回true
// baTable.auth = function () {
//     return true
// }

// 更新主题设置
const updateTheme = () => {
    // 向iframe发送主题更新消息 - 转换为JSON字符串避免数据克隆错误
    if (previewIframe.value && previewIframe.value.contentWindow) {
        const themeData = {
            type: 'theme_update',
            settings: JSON.parse(JSON.stringify(themeSettings)), // 深拷贝避免引用问题
        }

        try {
            previewIframe.value.contentWindow.postMessage(themeData, '*')
        } catch (error) {
            console.warn('预览窗口通信失败:', error)
        }
    }
    console.log('主题已更新:', themeSettings)
    console.log('排序:', themeSettings.tabbar.list)
}

// 保存主题设置
const saveTheme = async () => {
    try {
		
		saveThemeSettings(themeSettings).then(res =>{
			 ElMessage.success(res.msg)
		})
        // 这里可以调用API保存主题设置
        // 模拟保存成功
       
        console.log('主题已保存:', themeSettings)
    } catch (error) {
        ElMessage.error(t('routine.theme.save_error'))
        console.error('保存主题失败:', error)
    }
}

// 重置主题设置
const resetTheme = () => {
    Object.assign(themeSettings, initialThemeSettings)
    updateTheme()
    ElMessage.info(t('routine.theme.reset_success'))
}

// 处理图标上传 - 添加列表类型参数
const handleIconUpload = (file: any, index: number, type: 'icon' | 'selectedIcon' | 'image', listType: string) => {
    // 验证文件
    const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(file.raw.name)
    if (!isImage) {
        ElMessage.error('只能上传图片文件！')
        return
    }
    const isLessThan2M = file.raw.size / 1024 / 1024 < 2
    if (!isLessThan2M) {
        ElMessage.error('图片大小不能超过2MB！')
        return
    }

    // 使用FormData上传
    let fd = new FormData()
    fd.append('file', file.raw)

    fileUpload(fd)
        .then((res) => {
            if (res.code === 1 && res.data && res.data.file) {
                // 根据列表类型更新对应的数组
                const listMap: Record<string, any[]> = {
                    bottomNav: themeSettings.tabbar.list,
                    home: themeSettings.tabbar.list1,
                    userCenterOne: themeSettings.tabbar.myactive1,
                    userCenterTwo: themeSettings.tabbar.myactive,
                    userCenterBottom: themeSettings.tabbar.grzx,
                    banner: themeSettings.tabbar.banner,
                    homeAd: themeSettings.tabbar.indexgg,
                    userCenterAd: themeSettings.tabbar.usergg,
                }

                const targetList = listMap[listType]
                if (targetList && targetList[index]) {
                    targetList[index][type === 'image' ? 'icon' : type] = res.data.file.full_url
                    updateTheme()
                    ElMessage.success('上传成功')
                }
            } else {
                ElMessage.error('上传失败，请重试')
                console.error('上传返回数据:', res)
            }
        })
        .catch((error) => {
            ElMessage.error('上传失败，请重试')
            console.error('上传错误:', error)
        })
}

// 添加新按钮 - 添加列表类型参数
const addButton = (listType: string) => {
    // 根据列表类型向对应的数组添加新项目
    const listMap: Record<string, any[]> = {
        bottomNav: themeSettings.tabbar.list, // 底部导航按钮
        home: themeSettings.tabbar.list1, // 首页按钮
        userCenterOne: themeSettings.tabbar.myactive1, // 用户中心一级按钮
        userCenterTwo: themeSettings.tabbar.myactive, // 用户中心二级按钮
        userCenterBottom: themeSettings.tabbar.grzx, // 用户中心底部按钮
        banner: themeSettings.tabbar.banner, // banner广告
        homeAd: themeSettings.tabbar.indexgg, // 首页广告
        userCenterAd: themeSettings.tabbar.usergg, // 用户中心广告
    }

    const targetList = listMap[listType]
    if (targetList) {
        // 根据列表类型创建不同结构的对象
        if (listType === 'bottomNav') {
            targetList.push({
                icon: '',
                selectedIcon: '',
                text: '',
                path: '',
            })
        } else if (['banner', 'homeAd', 'userCenterAd'].includes(listType)) {
            targetList.push({
                icon: '',
                path: '',
            })
        } else {
            targetList.push({
                icon: '',
                text: '',
                path: '',
            })
        }

        updateTheme()
    }
}

// 删除按钮 - 添加列表类型参数
const removeButton = (index: number, listType: string) => {
    // 根据列表类型操作对应的数组
    const listMap: Record<string, any[]> = {
        bottomNav: themeSettings.tabbar.list,
        home: themeSettings.tabbar.list1,
        userCenterOne: themeSettings.tabbar.myactive1,
        userCenterTwo: themeSettings.tabbar.myactive,
        userCenterBottom: themeSettings.tabbar.grzx,
        banner: themeSettings.tabbar.banner,
        homeAd: themeSettings.tabbar.indexgg,
        userCenterAd: themeSettings.tabbar.usergg,
    }

    const targetList = listMap[listType]
    if (targetList) {
        // 广告类列表允许为空，其他列表至少保留一个
        if (targetList.length <= 1 && !['banner', 'homeAd', 'userCenterAd'].includes(listType)) {
            ElMessage.warning('至少保留一个按钮')
            return
        }
        targetList.splice(index, 1)
        updateTheme()
    }
}

// 拖拽结束处理函数
const handleDragEnd = (evt: any, listType: string) => {
    // 确保索引有效且发生了位置变化
    if (evt.oldIndex !== undefined && evt.newIndex !== undefined && evt.oldIndex !== evt.newIndex) {
        updateTheme()
    }
}

// 选择页面路径 - 添加列表类型参数
const selectPath = (index: number, listType: string) => {
    // 这里可以实现页面路径选择器
    ElMessage.info('请在输入框中直接输入页面路径')
    console.log('选择路径索引:', index, '列表类型:', listType)
}

// iframe加载完成
const onIframeLoaded = () => {
    console.log('预览窗口加载完成')
    // 初始设置主题
    updateTheme()
}

// 挂载组件时初始化数据
onMounted(() => {
    // 模拟数据加载，可以根据需要取消注释
    getThemeSettings().then((res) => {
        if (res && res.data) {
			let { themeConfig: {admin, business, navbar, tabbar, theme}, bannerTop, menuTop, searchTopset } = res.data
			
			// 主题设置
			themeSettings.theme = theme
			// 首页顶部设置
			themeSettings.topset.bannerTop = bannerTop
			themeSettings.topset.menuTop = menuTop
			themeSettings.topset.type = searchTopset
			// 管理端配置
			themeSettings.admin = admin
			// 商家端配置
			themeSettings.business = business
			// 顶部导航栏配置
			themeSettings.navbar = navbar
			
			// 底部导航栏配置 以及 目录广告配置
			themeSettings.tabbar = tabbar
		
        }
    })
    // baTable.getData()
    updateTheme()
})

</script>

<style scoped lang="scss">
.ba-table-box {
    padding: 35px;
    background-color: #fff;
    border-radius: 0;
}

.theme-editor-content {
    display: flex;
    gap: 20px;
    min-height: 820px;
}

/* 按钮配置样式 */
.button-config-container {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.button-config-header {
    display: flex;
    background-color: #f5f7fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px;
}

.config-title {
    flex: 1;
    font-weight: bold;
    color: #333;
    text-align: left;
    display: flex;
}
.flex03 {
    flex: 0.3 !important;
}
.flex05 {
    flex: 0.5 !important;
}

.jc-center {
    justify-content: center !important;
}

.button-config-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

/* 拖拽相关样式 */
.drag-handle {
    cursor: move;
    opacity: 0.8;
    color: #333 !important;
    background-color: #666;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-handle:hover {
    opacity: 1;
}

.button-config-item:last-child {
    border-bottom: none;
}

.config-cell {
    flex: 1;
    display: flex;
    align-items: center;
}
.gap8 {
    gap: 8px !important;
}

.pdr25 {
    padding-right: 25px !important;
}

.sortable-ghost {
    opacity: 0.5;
    background-color: #f5f7fa;
}

.sortable-chosen {
    background-color: #ecf5ff;
}

.drag-handle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-preview {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-preview-image {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
}
.icon-preview-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.upload-btn {
    margin-top: 4px;
}

.add-button-container {
    padding: 10px;
    text-align: left;
    background-color: #fafafa;
}

/* 左侧预览区域 */
.preview-section {
    background: url('https://hi.we.weizaipay.com/assets/img/statusbar.png') center 20px no-repeat;
    width: 400px;
    min-width: 400px;
    height: 800px;
    display: block;
    float: left;
    box-shadow: 0 4px 25px 0 rgba(4, 40, 60, 0.15);
    border-radius: 25px;
    padding: 44px 10px 10px 10px;
    margin-right: 30px;
}
.phone-preview {
    width: 100%;
    height: 100%;
}

/* 右侧编辑区域 */
.editor-section {
    flex: 1;
    overflow-y: auto;
}

.card-header {
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    span {
        border-left: 3px solid #409eff;
        padding-left: 10px;
    }
}

.color-group,
.layout-group {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
}

.color-group h4,
.layout-group h4 {
    margin-bottom: 15px;
    font-size: 14px;
    color: #606266;
}

.color-item,
.form-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
    width: 50%;
    label {
        width: 150px !important;
    }
}

.color-item label,
.form-item label {
    width: 120px;
    font-size: 14px;
    color: #606266;
}

.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .theme-editor-content {
        flex-direction: column;
    }

    .preview-section {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}
</style>
